<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>部门管理列表</title>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css"/>
    <link rel="stylesheet" href="/css/course/course-list.css"/>

</head>
<style>
    .l{
        float: left;
    }
    .r{
        float: right;
    }
</style>
<body style="background-color: #F9F9F9">
<!--title-->
<div style="margin-left: 20px;width: 93%;height: 50px;padding-top: 10px;background-color: #F1F1F1">
    <div>
        <div style="height: 30px; width: 5px;background-color:#009688 " class="l"></div>
        <h3 class="l" style="margin-top: 5px;margin-left: 5px">部门列表</h3>
        <div class="r" style="margin-right: 20px">
            <button type="button" class="layui-btn" onclick="refresh()">刷新</button>
            <button type="button" class="layui-btn" onclick="backOff()">返回</button>
        </div>
    </div>
</div>

<!--检索-->
<div style="margin-left: 20px;width: 93%; height: 50px;margin-top: 20px;border: #F1F1F1 1px solid">
    <div style="padding-top: 5px;margin-bottom: 10px">
        <div class="l" style="margin-top: 10px;margin-left: 10px">
            <i class="layui-icon">&#xe615;</i>
            筛选查询
        </div>
    </div>
</div>
<div style="margin-left: 20px;width: 93%; height: 50px;padding-top: 10px;border: #F1F1F1 1px solid">
    <form class="layui-form">

        <div class="layui-form-item l">

            <label class="layui-form-label">部门名称：</label>
            <div class="layui-input-inline">
                <input class="layui-input" type="text" name="name" placeholder="输入部门名称">
            </div>

            <label class="layui-form-label">管理员：</label>
            <div class="layui-input-inline">
                <input class="layui-input" type="text" name="createId" placeholder="输入管理员名称">
            </div>

            <label class="layui-form-label">创建日期：</label>
            <div class="layui-input-inline">
                <input class="layui-input" type="text" name="createDate" placeholder="输入日期">
            </div>

            <label class="layui-form-label">状态：</label>
            <div class="layui-input-inline">
                <select class="layui-select" name="status">
                    <option value=""></option>
                    <option value="1">启用</option>
                    <option value="2">停用</option>
                </select>
            </div>

        </div>

        <div class="r" style="margin-right: 20px">
            <button type="button" class="layui-btn" onclick="retrieval()">搜索</button>
            <button type="button" class="layui-btn" onclick="rest()">重置</button>
        </div>

    </form>
</div>

<!--头部工具栏-->
<div id="toolutil" style="display: none;">
        <span>
            <i class="layui-icon layui-icon-align-left"></i>
            部门列表
        </span>
    <span class="btnRight" style="float: right">
            <button onclick="add()" type="button" class="layui-btn layui-btn layui-btn-sm">
                <i class="layui-icon layui-icon-upload-circle"></i>
                添加部门
            </button>
        </span>
</div>

<!--主体-->
<div style="margin-left: 20px;width: 93%; height: 360px">
    <table id='table' lay-filter="myTable"></table>
</div>

<input type="hidden" id="id">
<input type="hidden" id="name">
<input type="hidden" id="deptDescirbe">
</body>
<script>

    layui.use(['jquery','table','form','layer'],function () {
        var $ = layui.$,
            table = layui.table,
            form = layui.form,
            layer = layui.layer;

        //检索
        retrieval = function retrieval(){
            var name = $('input[name=name]').val();
            var createId = $('input[name=createId]').val();
            var createDate = $('input[name=createDate]').val();
            var status = $('select[name=status]').val();

            $.ajax({
                 url: '/jurisdiction/retrievalDept'
                ,data: {
                     'name': name
                    ,'createId': createId
                    ,'createDate': createDate
                    ,'status': status
                }
                ,dataType: 'json'
                ,success:function(data){
                    tableRender(data.data);
                }
            });

        }

        //重置
        rest = function rest(){
            $('input[name=name]').val('');
            $('input[name=createId]').val('');
            $('input[name=createDate]').val('');
            $('select[name=status]').val('');
        }

        //获取部门信息
        tableAjax = function tableAjax(){
            $.ajax({
                url: '/jurisdiction/getZtree'
                ,data:{}
                ,dataType: 'json'
                ,success:function(data){
                    tableRender(data.data);
                }
            });
        }
        tableAjax();
        //渲染部门表格
        function tableRender(data){
            table.render({
                elem: '#table'
                ,toolbar: '#toolutil'
                ,data: data
                ,page: true
                ,cols: [[
                     {checkbox: true}
                    ,{type: 'numbers',title: '序号',align: 'center'}
                    ,{field: 'name',title: '部门名称',align: 'center'}
                    ,{field: 'deptDescirbe',title: '部门描述',align: 'center'}
                    ,{field: 'createId',title: '创建人',align: 'center'}
                    ,{field: 'createDate',title: '创建时间',align: 'center'}
                    ,{field: 'status',title: '状态',align: 'center',templet:function(data){
                        if(data.status == 1){
                            return '<input value="'+data.id+'" type="checkbox" lay-skin="switch" lay-filter="kg" lay-text="启用|停用" checked/>';
                        }else if(data.status == 2){
                            return '<input value="'+data.id+'" type="checkbox" lay-skin="switch" lay-filter="kg" lay-text="启用|停用"/>';
                        }else{
                            return '后台数据错误';
                        }
                        }}
                    ,{title: '操作',align: 'center',templet:function(data){
                        return '<a style="color: #0DAB9E;" onclick="edit(\''+data.id+'\',\''+data.name+'\',\''+data.deptDescirbe+'\')">编辑</a> ' +
                            '<a style="color: #0DAB9E;" onclick="del('+data.id+')">删除</a>'
                        }}
                ]]
            });
        }


        //监听启用开关
        form.on('switch(kg)',function(obj){
            var checked = obj.elem.checked;
            var id = obj.value;
            var status;
            if(checked){
                status = '1';
            }else{
                status = '2';
            }

            $.ajax({
                 url: '/jurisdiction/statusSwitch'
                ,data: {
                     'id': id
                    ,'status': status
                }
                ,dataType: 'json'
                ,success:function(data){
                     if(data.data){
                         if(checked){
                             layer.msg('已启用');
                         }else{
                             layer.msg('已禁用');
                         }
                     }
                }
            })



        });




        //编辑部门
        edit = function edit(id,name,deptDescirbe){
            $('#id').val(id);
            $('#deptDescirbe').val(deptDescirbe);
            $('#name').val(name);
            layer.open({
                 type: 2
                ,title: '编辑部门信息'
                ,content: 'popup/department-list-edit.html'
                ,area: ['500px','400px']
            });
        }


        //删除部门
        del = function del(id){
            layer.open({
                 type: 0
                ,title: '删除部门'
                ,content: '您确定要删除此部门吗？'
                ,area: ['200px','200px']
                ,btn: ['确定','取消']
                ,yes:function(index){
                    $.ajax({
                         url: '/jurisdiction/delDept'
                        ,data: {'id': id}
                        ,dataType: 'json'
                        ,success:function(data){
                             if(data.data){
                                 layer.close(index);
                                 tableAjax();
                                 layer.msg('已删除');

                             }
                        }
                    });
                }
            });
        }

        //添加部门
        add = function add(){
            layer.open({
                type: 2
                ,title: '添加一个部门'
                ,content: 'popup/department-list-add.html'
                ,area: ['500px','400px']
            });
        }



        //返回
        backOff = function backOff() {
            var arr = localStorage.getItem("numArr");
            var numArr = arr.split(",");
            numArr.pop();
            window.parent.layui.element.tabChange('tab',numArr[numArr.length - 1]);
            localStorage.setItem("numArr",numArr);
        }
        //刷新
        refresh = function refresh(){
            window.location.reload();
        }

    })


</script>
</html>